<template>
  <div class="adoptAlbum" v-if="isInit">
    <el-form :model="this" label-width="100px">
      <el-form-item label="物品主图:" class="is-required">
        <y-img-select
          :value="imgAry"
          :disabled="isView"
          @change="updateMain"
          placeholder="请点选图片"
          business-type="SYSTEM_LIB_ADOPT"></y-img-select>
      </el-form-item>
      <el-form-item label="物品视频:">
        <y-upload-video
          :url="videoAry"
          :disabled="isView"
          @update="uploadVideoModel"
          re-upload
          redraw-on-server
          business-sys-module-code="ADOPT_ALBUM">
        </y-upload-video>
      </el-form-item>
      <el-form-item label="物品画廊:" class="is-required">
        <y-upload-img
          :url="galleryAry"
          :disabled="isView"
          value-type="ObjectArray"
          @update="updateModelList"
          :cropper-options="{
            fixedNumber: [1, 1],
            centerBox: false
          }"
          re-upload
          redraw-on-server
          business-sys-module-code="ADOPT_ALBUM">
        </y-upload-img>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "adoptAlbum",
  props:{
    adoptId: String,
    isView:{
      type: Boolean,
      default: false
    }
  },
  computed:{
    imgAry(){
      return this.imgList.length ? {
        url: this.imgList[0].picTotalUrl,
        id: this.imgList[0].attachmentId
      } : {
        url: '',
        id: ''
      }
    },
    galleryAry(){
      return this.galleryList.map(al => ({
        url: al.picTotalUrl,
        id: al.attachmentId
      }));
    },
    videoAry(){
      return this.videoList.map(al => ({
        url: al.picTotalUrl,
        id: al.attachmentId
      }));
    }
  },
  data(){
    return {
      isInit: false,
      imgList: [],
      galleryList: [],
      videoList: []
    }
  },
  mounted() {
    this.refresh();
  },
  methods:{
    refresh(type){
      this.$yAxios({
        url: this.$api.adopt.adoptAlbumList,
        data: {
          adoptId: this.adoptId
        },
        loading: true
      }, info => {
        if(!type){
          this.imgList = info.filter(al => al.albumType === '0');
          this.galleryList = info.filter(al => al.albumType === '1');
          this.videoList = info.filter(al => al.albumType === '2');
        }else{
          if(type === '0'){
            this.imgList = info.filter(al => al.albumType === '0');
          }
          if(type === '1'){
            this.galleryList = info.filter(al => al.albumType === '1');
          }
          if(type === '2'){
            this.videoList = info.filter(al => al.albumType === '2');
          }
        }
        this.isInit = true;
      })
    },
    updateMain(value){
      let file = {
        id: value.id,
        name: value.url
      }
      //更新主图
      if(this.imgList.length){
        if(!value.id){
          this.updateModel({
            type: 'delete', file
          })
        }else{
          this.updateModel({
            type: 'edit', file
          })
        }
      }else{
        if(!value.id){
          //不操作
        }else{
          this.updateModel({
            type: 'add', file
          })
        }
      }
    },
    updateModel({type, file, preFile}, albumType = '0'){
      let url, data, msg;
      let ary, str;
      switch(albumType){
        case '0':{
          ary = this.imgList;
          str = '主图';
          break;
        }
        case '1':{
          ary = this.galleryList;
          str = '画廊';
          break;
        }
        case '2':{
          ary = this.videoList;
          str = '视频';
          break;
        }
      }
      switch(type){
        case 'delete':{
          let removeFile = albumType === '0' ? ary[0] : ary.find(al => al.attachmentId === file.id)
          if(!removeFile){
            return;
          }
          url = this.$api.adopt.removeAdoptAlbum;
          data = {
            ids: [removeFile.id]
          };
          msg = `删除${str}信息成功`;
          break;
        }
        case 'edit':{
          let obj;
          if(!preFile && albumType === '0'){
            url = this.$api.adopt.saveAdoptAlbum;
            obj = this.imgList[0];
          }else if(preFile){
            url = this.$api.adopt.saveAdoptAlbum;
            obj = ary.find(item => item.picTotalUrl === preFile.name && item.attachmentId === preFile.id);
          }else{
            this.$alert(`无法更新${str}，请先删除${str}后再次上传`);
            return;
          }
          if(obj){
            data = Object.assign({}, obj, {
              adoptId: this.adoptId,
              albumType,
              attachmentId: file.id,
              picTotalUrl: file.name,
            })
            msg = `更新${str}成功`;
          }else{
            this.$alert(`无法更新${str}，请先删除${str}后再次上传`);
            return;
          }
          break;
        }
        case 'add':{
          url = this.$api.adopt.saveAdoptAlbum;
          data = {
            attachmentId: file.id,
            picTotalUrl: file.name,
            adoptId: this.adoptId,
            albumType
          }
          msg = `保存${str}成功`;
        }
      }
      this.$yAxios({
        url, data, loading: true, eventsAfterPost: 'redraw'
      }, info => {
        this.$message({
          type: 'success',
          message: msg
        });
        this.refresh(albumType);
      })
    },
    updateModelList({type, file, preFile}){
      this.updateModel({type, file, preFile}, '1')
    },
    uploadVideoModel({type, file, preFile}){
      this.updateModel({type, file, preFile}, '2')
    },
    save(){
      return new Promise((resolve, reject) => {
        if(!this.imgList.length){
          this.$alert('必须选择一个物品主图', {
            confirmButtonText: '确定'
          });
          resolve(false);
        }else if(this.galleryList.length < 1){
          this.$alert('必须为物品画廊上传至少1张图片', {
            confirmButtonText: '确定'
          });
          resolve(false);
        }else{
          resolve(true);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.adoptAlbum{
  padding-top: 20px;
  border-top: @common-border;
  border-bottom: @common-border;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /deep/ .el-form-item:first-child{
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: @common-border;
  }
}
</style>